<template name="login" id="index">
	<view class="main">

		<!-- 标题 -->
		<view class="title">
			<text>欢迎来到变色狐</text>
			<view class="skip" @click="clickSkip">
				<text>跳过</text>
				<image class="right_icon" src="../../static/buttonSource/right.png" mode=""></image>
			</view>
		</view>

		<!-- 选择标签计数 -->
		<view class="count">
			<text>请选择您所关注的话题 {{chooseCount.length}} / 3</text>
		</view>

		<!-- 标签 -->
		<view class="button_main">
			<!-- <view class="choose_button" @click="clickItem(listItem)" :class="{active: isActive}" v-for="(listItem, index) in tagList">{{listItem.name}}</view> -->
			<ChooseButton v-for="item in tagList" :listItem="item" @click="clickItem" :chooseCount="chooseCount">
			</ChooseButton>
		</view>

		<!-- 按钮 -->
		<view class="bottom_button">
			<button :disabled="isDisabled" @click="clickSubmit">确定</button>
		</view>

	</view>
</template>

<script>
	import ChooseButton from '@/components/ChooseButton.vue'
	export default {
		comments: {
			ChooseButton
		},
		name: "login",
		data() {
			return {
				chooseCount: [],
				tagList: [],
				isActive: '',
				isDisabled: true
			}
		},
		methods: {
			clickItem: function(item) {
				let arr = this.chooseCount
				const isPush = arr.every(arrItem => arrItem !== item)
				if (arr.length === 3 && isPush) {
					uni.showToast({
						icon: "error",
						title: "最多选择3个"
					})
					return
				} else if (isPush) {
					arr.push(item);
				} else if (!isPush) {
					arr = this.chooseCount.filter(arrItem => arrItem !== item)
				}
				if (arr.length > 0) {
					this.isDisabled = false
				} else {
					this.isDisabled = true
				}
				this.chooseCount = arr;
			},
			clickSkip: function(e) {
				uni.setStorageSync("isFrist", true);
				e.stopPropagation();
				e.preventDefault();
				uni.switchTab({
					url: "../index/index",
					fail(error) {
						console.log(error)
					}
				})
			},
			login: function() {
				let that = this
				uni.showLoading()
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'weixin',
							//授权成功的回调
							success: (res) => {
								that.$api.userLogin({
									code: loginRes?.code,
									userData: JSON.stringify(res.userInfo)
								}).then(
									(successRes) => {
										uni.hideLoading()
										if (successRes?.code === "200") {
											that.getClass();
											uni.setStorageSync("token", successRes?.data
												?.token)
											uni.setStorageSync("userInfo", successRes?.data)
											
										}else {
											uni.showToast({
												title: '登录失败',
												icon: 'error',
												duration: 2000
											});
										}
									}
								)
							}
						});
					},
					fail: function() {
						uni.hideLoading()
					}
				});
			},
			getClass: function() {
				let that = this;
				this.$api.userClassification().then(
					(res) => {
						if (res?.code === '200') {
							this.tagList = res.data.map(item => {
								return {
									...item,
									value: item?.id
								}
							})
						}
					})
			},
			clickSubmit: function() {
				uni.setStorageSync("isFrist", true);
				this.$api.saveSserClassification({
					classificationIdList: this.chooseCount.map(item => {return item.id}),
					userId: uni.getStorageSync('userInfo')?.id
				}).then(
					(res) => {
						if(res?.code === '200')
						uni.showToast({
							title: '添加成功',
							icon: 'none',
							duration: 2000
						});
						uni.switchTab({
							url: "../index/index",
							fail(error) {
								console.log(error)
							}
						})
					}
				)
			}
		},
		onLoad: function() {
			if (!uni.getStorageSync("isFrist")) {
				this.login();
			}
		},
	}
</script>

<style>
	.main {
		width: 100%;
		padding: 30rpx;
		padding-top: 30rpx;
		position: relative;
	}

	.title {
		width: 100%;
		margin-top: 20rpx;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.title>text {
		color: #222222;
		font-size: 20px;
		font-weight: 700;
	}

	.title>.skip {
		color: #FA6823;
		width: 80rpx;
		display: flex;
		position: relative;
	}

	.skip>.right_icon {
		position: absolute;
		display: table-cell;
		height: 50%;
		width: 10rpx;
		right: 0rpx;
		top: 40%;
		transform: translateY(-50%);
	}

	.count {
		margin-top: 20rpx;
		color: #8f9199;
	}

	.button_main {
		margin-top: 80rpx;
		display: grid;
		grid-template-columns: repeat(3, 31.5%);
		grid-row-gap: 10rpx;
		grid-column-gap: 20rpx;
	}

	.bottom_button {
		position: absolute;
		bottom: 30rpx;
		width: 100%;
		left: 0;
		right: 0;
	}

	.bottom_button>button {
		width: 80%;
		margin: auto;
		border-radius: 20px 20px;
		background-image: linear-gradient(to right, #F9A848, #F15F35);
		color: #FFFFFF;
	}

	.choose_button {
		height: 80rpx;
		color: #222222;
		line-height: 80rpx;
		padding: 10rpx 25rpx;
		background-color: #F7F7F7;
		border-radius: 50rpx;
		text-align: center;
		font-size: 14px;
	}
</style>
